<script lang="ts" setup>
import { ref } from 'vue'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '修改登录密码',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

// 表单数据
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 密码可见性控制
const passwordVisibility = ref({
  oldPassword: false,
  newPassword: false,
  confirmPassword: false,
})

// 表单验证状态
const formErrors = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 切换密码可见性
function togglePasswordVisibility(field: keyof typeof passwordVisibility.value) {
  passwordVisibility.value[field] = !passwordVisibility.value[field]
}

// 验证密码强度
function getPasswordStrength(password: string) {
  if (!password || password.length < 6)
    return { level: 0, text: '弱', color: 'text-red-500' }

  let score = 0
  if (password.length >= 8)
    score++
  if (/[A-Z]/.test(password))
    score++
  if (/\d/.test(password))
    score++
  if (/[^A-Z0-9]/i.test(password))
    score++

  if (score >= 3)
    return { level: 3, text: '强', color: 'text-green-500' }
  if (score >= 2)
    return { level: 2, text: '中', color: 'text-orange-500' }
  return { level: 1, text: '弱', color: 'text-red-500' }
}

// 表单验证
function validateForm() {
  let isValid = true

  // 重置错误信息
  formErrors.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  }

  // 验证旧密码
  if (!formData.value.oldPassword) {
    formErrors.value.oldPassword = '请输入旧密码'
    isValid = false
  }

  // 验证新密码
  if (!formData.value.newPassword) {
    formErrors.value.newPassword = '请输入新密码'
    isValid = false
  }
  else if (formData.value.newPassword.length < 6) {
    formErrors.value.newPassword = '新密码长度至少6位'
    isValid = false
  }

  // 验证确认密码
  if (!formData.value.confirmPassword) {
    formErrors.value.confirmPassword = '请确认新密码'
    isValid = false
  }
  else if (formData.value.confirmPassword !== formData.value.newPassword) {
    formErrors.value.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }

  return isValid
}

// 提交表单
async function submitForm() {
  if (!validateForm()) {
    return
  }

  try {
    // 这里应该调用API修改密码
    console.log('提交修改密码请求:', formData.value)

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    uni.showToast({
      title: '密码修改成功',
      icon: 'success',
    })

    // 成功后返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
  catch (error) {
    uni.showToast({
      title: '密码修改失败，请重试',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="change-password-container min-h-screen bg-slate-50 p-4">
    <view class="form-container rounded-lg bg-white p-4">
      <!-- 旧密码输入 -->
      <view class="form-item mb-5">
        <view class="label mb-1 text-sm text-slate-700">
          旧密码 *
        </view>
        <view class="input-wrapper relative">
          <input
            v-model="formData.oldPassword"
            :type="passwordVisibility.oldPassword ? 'text' : 'safe-password'"
            placeholder="请输入当前密码"
            class="w-full border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900 focus:border-primary focus:outline-none"
          >
          <view
            class="absolute right-3 top-1/2 transform text-slate-400 -translate-y-1/2"
            @click="togglePasswordVisibility('oldPassword')"
          >
            <i :class="passwordVisibility.oldPassword ? 'i-solar:eye-broken' : 'i-solar:eye-closed-broken'" />
          </view>
        </view>
        <view class="error-message mt-1 text-xs text-red-500">
          {{ formErrors.oldPassword }}
        </view>
      </view>

      <!-- 新密码输入 -->
      <view class="form-item mb-5">
        <view class="label mb-1 text-sm text-slate-700">
          新密码 *
        </view>
        <view class="input-wrapper relative">
          <input
            v-model="formData.newPassword"
            :type="passwordVisibility.newPassword ? 'text' : 'safe-password'"
            placeholder="请输入新密码，至少6位"
            class="w-full border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900 focus:border-primary focus:outline-none"
          >
          <view
            class="absolute right-3 top-1/2 transform text-slate-400 -translate-y-1/2"
            @click="togglePasswordVisibility('newPassword')"
          >
            <i :class="passwordVisibility.newPassword ? 'i-solar:eye-broken' : 'i-solar:eye-closed-broken'" />
          </view>
        </view>
        <view class="error-message mt-1 text-xs text-red-500">
          {{ formErrors.newPassword }}
        </view>

        <!-- 密码强度提示 -->
        <view v-if="formData.newPassword" class="mt-2 flex items-center">
          <view class="mr-2 h-1 w-24 overflow-hidden rounded-full bg-slate-100">
            <view
              class="h-full rounded-full transition-all duration-300 ease-out"
              :class="getPasswordStrength(formData.newPassword).color"
              :style="{ width: `${(getPasswordStrength(formData.newPassword).level / 3) * 100}%` }"
            />
          </view>
          <text class="text-xs" :class="getPasswordStrength(formData.newPassword).color">
            {{ getPasswordStrength(formData.newPassword).text }}
          </text>
        </view>
      </view>
      <!-- 确认密码输入 -->
      <view class="form-item mb-6">
        <view class="label mb-1 text-sm text-slate-700">
          确认新密码 *
        </view>
        <view class="input-wrapper relative">
          <input
            v-model="formData.confirmPassword"
            :type="passwordVisibility.confirmPassword ? 'text' : 'safe-password'"
            placeholder="请再次输入新密码"
            class="w-full border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900 focus:border-primary focus:outline-none"
          >
          <view
            class="absolute right-3 top-1/2 transform text-slate-400 -translate-y-1/2"
            @click="togglePasswordVisibility('confirmPassword')"
          >
            <i :class="passwordVisibility.confirmPassword ? 'i-solar:eye-broken' : 'i-solar:eye-closed-broken'" />
          </view>
        </view>
        <view class="error-message mt-1 text-xs text-red-500">
          {{ formErrors.confirmPassword }}
        </view>
      </view>

      <!-- 密码建议提示 -->
      <view class="password-tips mb-6 rounded-lg bg-slate-100 p-3">
        <text class="mb-1 block text-xs text-slate-500">密码建议：</text>
        <text class="block text-xs text-slate-500">• 建议使用字母、数字和符号的组合</text>
        <text class="block text-xs text-slate-500">• 密码长度建议不少于8位</text>
        <text class="block text-xs text-slate-500">• 请勿使用与其他网站相同的密码</text>
      </view>

      <!-- 提交按钮 -->
      <button
        class="w-full rounded-lg bg-primary py-3 text-white font-medium"
        @click="submitForm"
      >
        确认修改
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.change-password-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.form-container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-item {
  transition: all 0.2s ease;
}

input {
  line-height: normal;
}

input::placeholder {
  color: #94a3b8;
}

button {
  line-height: normal;
}

button::after {
  border: none;
}

// 修复text中的转义问题
:deep(.text-xs) {
  white-space: pre-line;
}
</style>
